<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
const user=ref({
})

const imgurl=ref("")

const userinfo=()=>{
axios.get("/user/userInfo").then(result=>{
 user.value=result.data.data
imgurl.value=result.data.data.userPic
}).catch(err=>{
return err
})
}

onMounted(()=>{
  userinfo();
})
</script>

<template>

  <div class="user-info">
    <el-card class="info-card">
      <div slot="header" class="info-header">
        <el-row>
          <el-col :span="24">
            <el-avatar style="width: 200px;height: 200px">
              <div  class="block">
               <img style="width: 200px;height: 200px;border-radius: 50%" :src="imgurl"/>
              </div>
      </el-avatar>
          </el-col>
        </el-row>
      </div>
      <h1>用户信息</h1>
      <el-row class="info-row">
        <el-col :span="24">账号：{{user.username}}</el-col>

      </el-row>
      <el-row class="info-row">
        <el-col :span="24">昵称：{{user.nickname}}</el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="24">邮箱:{{user.email}}</el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="24">创建时间:{{user.createTime}}</el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="24">更新时间:{{user.updateTime}}</el-col>
      </el-row>
      <!-- 其他个人信息字段 -->
    </el-card>
  </div>
</template>

<style scoped>
*{
  text-align: center;
  font-family: "华文楷体";
}
.info-card{
  font-size: larger;
}
.info-row{
  font-size: larger;
}
</style>